<template>
  <div class="container">
    <!-- <h1 class="page-title">评估操作界面</h1> -->
    <el-row :gutter="30">
      <el-col :span="12">
        <ModuleCost />
      </el-col>
      <el-col :span="12">
        <ModuleB />
      </el-col>
    </el-row>
    <el-row :gutter="30" style="margin-top: 30px;">
      <el-col :span="12">
        <el-row :gutter="30">
          <el-col :span="12">
            <ModuleRDF />
          </el-col>
          <el-col :span="12">
            <ModuleSWF />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="30">
          <el-col :span="12">
            <ModulePDR />
          </el-col>
          <el-col :span="12">
            <ModuleRSK />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import ModulePDR from '../../components/costCalculator/modulePDR.vue'
import ModuleB from '../../components/costCalculator/moduleB.vue'
import ModuleRDF from '../../components/costCalculator/moduleRDF.vue'
import ModuleSWF from '../../components/costCalculator/moduleSWF.vue'
import ModuleCost from '../../components/costCalculator/moduleCost.vue'
import ModuleRSK from '../../components/costCalculator/ModuleRSK.vue'
</script>

<style scoped>
.container {
  padding: 20px 30px; /* 调整容器的内边距 */
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 0; /* 去掉标题上方的空白 */
  margin-bottom: 35px; /* 减少标题和内容之间的间距 */
  text-align: center; /* 可根据需要调整对齐方式 */
}
</style>
